<template>
  <div>
    <ElButton type="success" @click="() => (visible = true)">新增</ElButton>
    <ElDialog v-model="visible">
      <ElForm
        ref="form"
        style="width: 360px"
        :rules="rules"
        :model="leaveAction"
      >
        <ElFormItem label="请假原因" prop="reason">
          <ElInput v-model="leaveAction.reason"></ElInput>
        </ElFormItem>
        <ElFormItem label="请假原因">
          <ElSelect v-model="leaveAction.leaveType">
            <ElOption :label="'病假'" :value="'病假'"></ElOption>
            <ElOption :label="'事假'" :value="'事假'"></ElOption>
            <ElOption :label="'年假'" :value="'年假'"></ElOption>
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="请假时间">
          <ElDatePicker
            type="daterange"
            v-model="leaveAction.timeRange"
          ></ElDatePicker>
          <!-- <ElDatePicker v-model="editLeaveAction.endTime"></ElDatePicker> -->
        </ElFormItem>
        <ElFormItem label="材料上传">
          <ElTag>{{ leaveAction.pic }}</ElTag>
          <!-- ElUpload -->
        </ElFormItem>
        <ElFormItem>
          <ElButton @click="save">保存</ElButton>
        </ElFormItem>
      </ElForm>
    </ElDialog>
  </div>
</template>
<script lang="ts">
import axios from "@/api/axiosConfig";
import { ElMessage } from "element-plus";
import { defineComponent } from "vue";

/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import from

export default defineComponent({
  name: "LeaveInsert",
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      visible: false,
      leaveAction: {
        leaveType: "",
        timeRange: undefined,
        reason: "",
        pic: "",
      },
      rules: {
        reason: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
          // { pattern: /^\d{1,4}$/, message: "1-4的数字", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {},
  methods: {
    // sampleM() {},
    async save() {
      // document.getElementById(id)
      const form: any = this.$refs["form"];
      try {
        await form.validate();
      } catch (error) {
        ElMessage.error("字段校验不通过");
        return;
      }

      // insertForm.validate(async (rs: any) => {
      // if (rs) {
      const d = {
        leaveType: this.leaveAction.leaveType,
        startTime: null,
        endTime: null,
        reason: this.leaveAction.reason,
        pic: this.leaveAction.pic,
      };
      if (this.leaveAction.timeRange) {
        d.startTime = this.leaveAction.timeRange[0];
        d.endTime = this.leaveAction.timeRange[1];
      } else {
        d.startTime = null;
        d.endTime = null;
      }

      const res = await axios({
        url: "/leaveAction/insert",
        method: "post",
        data: d,
      });
      this.visible = false;
      //   that.queryByCondition()
      //   自定义事件
      this.$emit("post-insert");
      // } else {
      //   ElMessage.error("字段校验不通过");
      // }
      // });
    },
  },
  watch: {
    // sampleP(n, o) {},
  },
});
</script>

<!--<style scoped>-->
<style lang="scss" scoped></style>
